<template>
  <div class="home">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      @select="handleSelect"
      background-color="#343743"
      text-color="#fff"
      active-text-color="#ff00ff"
    >
      <el-submenu :index="'' + menu.id" v-for="menu in menus" :key="menu.id">
        <template slot="title">{{ menu.authName }}</template>
        <el-menu-item :index="'' + child.id" v-for="child in menu.children" :key="child.id">{{ child.authName }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import service from 'utils/request'

export default {
  name: 'Home',

  data() {
    return {
      menus: [],
      activeIndex: '1',
    }
  },

  mounted() {
    this._getMenus()
  },

  methods: {
    _getMenus() {
      service.get('/menus').then(res => {
        this.menus = res
      })
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="sass" scoped>
.el-menu-demo
  width: 200px
</style>
